<template>
  <div class="col8" :style="borderStyle">
    <el-row>
      <el-col :span="14">
        <div class="datePart">
          <div class="month">{{ getDate(0) }}</div>
          <div class="date">
            <span>{{ getDate(1) }}</span>
          </div>
          <div class="week">{{ getDate(2) }}</div>
        </div>
      </el-col>
      <el-col :span="10">
        <div class="ev">
          <div>
            <el-button type="primary" @click="addSchedule">添加日程 </el-button>
            <AddSchedule ref="addSchedule" @initData="initData" />
          </div>
          <div>
            <el-button type="primary" @click="scheduleAuth">日程安排</el-button>
            <AddSchedule ref="scheduleAuth" @initData="initData" />
          </div>
          <div>
            <el-button
              type="primary"
              @click="scheduleQuery"
            >日程查询</el-button>
            <ScheduleQuery ref="scheduleQuery" />
          </div>
        </div>
      </el-col>
    </el-row>
    <div class="level">
      <el-divider />
    </div>

    <el-row>
      <el-col :span="8" class="title"><span>优先级</span></el-col>
      <el-col :span="5">
        <div class="yxj">
          <div class="important" />
          <div><span>重要</span></div>
        </div>
      </el-col>
      <el-col :span="5">
        <div class="yxj">
          <div class="danger" />
          <div><span>紧急</span></div>
        </div>
      </el-col>
      <el-col :span="5">
        <div class="yxj">
          <div class="simple" />
          <div><span>一般</span></div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import AddSchedule from './AddSchedule.vue';
import ScheduleQuery from './ScheduleQuery.vue';
import { template } from '@/mixins/template';

export default {
  name: 'LeftTop',
  components: { AddSchedule, ScheduleQuery },
  mixins: [template],
  props: {
    temp: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {};
  },
  computed: {
    themes() {
      return this.$store.getters.theme;
    }
  },
  watch: {
    token(val, oldVal) {
      // 如果一开始没有，现在有了，说明刚登录，连接websocket
      if (!oldVal && val) {
        // this.initWebsocket()
      }
      // 如果原先由，现在没有了，说明退出登录，断开websocket
      if (oldVal && !val) {
        // this.closeWebsocket()
      }
    },
    themes: {
      handler(val, oldVal) {
        this.borderStyle.borderRadius = val.bkdx;
        this.borderStyle.border = '1px solid ' + val.bkys;

        this.borderStyle.boxShadow = '0 2px 4px rgba(0, 0, 0, .12)';

        this.borderStyle.background = val.columnGroundColor;
        this.borderStyle.color = val.fontColor;
        this.borderStyle = Object.assign({}, this.borderStyle);
      },
      immediate: true, // 父组件第一次传值时，执行handler，false则第一次不执行
      deep: false // formType为对象时，设置为true，此属性监听对象发生变化
    }
  },
  methods: {
    initData() {
      this.$emit('initData');
      // this.$parent.initData();
    },

    addSchedule() {
      // this.$nextTick作用是，当数据被修改后使用这个方法，会回调获取更新后的dom再渲染出来
      this.$nextTick(() => {
        this.$refs.addSchedule.openDialog(false);
      });
    },

    scheduleAuth() {
      // this.$nextTick作用是，当数据被修改后使用这个方法，会回调获取更新后的dom再渲染出来
      this.$nextTick(() => {
        this.$refs.scheduleAuth.openDialog(true);
      });
    },

    scheduleQuery() {
      this.$nextTick(() => {
        this.$refs.scheduleQuery.openQueryDialog(true);
      });
      // 跳转新页面
      // const userid = this.$store.getters.user.username;
      // const routeData = this.$router.resolve({
      //   path: '/schedule/query'
      // });
      // window.open(routeData.href, '_blank');
    },
    getDate(item) {
      const nowDate = new Date();
      const year = nowDate.getFullYear();
      const month = nowDate.getMonth() + 1;
      const day = nowDate.getDate();
      const wk = new Date().getDay();
      const weeks = [
        '星期日',
        '星期一',
        '星期二',
        '星期三',
        '星期四',
        '星期五',
        '星期六'
      ];
      const week = weeks[wk];
      const dates = [year + '年' + month + '月', day, week];
      return dates[item];
    }
    // callBack() {
    //   this.isShow = false;
    // },
  }
};
</script>

<style scoped>
.bottom {
  background: #fff;
  width: 92%;
  margin-left: 50px;
}

.datePart {
  margin-top: 10px;
}
.el-row {
  margin-bottom: 20px;
}

.el-row:firs-child {
  margin-top: 10px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.month {
  font-weight: 500;
  text-align: center;
}
.date {
  display: block;
  background: black;
  width: 92px;
  height: 92px;
  line-height: 92px;
  text-align: center;
  font-size: 38px;
  border-radius: 4px;
  margin: 10px auto;
  color: aliceblue;
}

.week {
  font-weight: 500;
  text-align: center;
}

.ev {
  height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  margin-top: 18px;
}

.title {
  height: 100px;
  line-height: 100px;
}

.yxj {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 100px;
}

.important {
  height: 30px;
  width: 30px;
  background-color: #ff5722;
}

.danger {
  height: 30px;
  width: 30px;
  background-color: #ffb800;
}

.simple {
  height: 30px;
  width: 30px;
  background-color: #5fb878;
}
.title {
  text-align: center;
}
.col8 {
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  box-sizing: border-box;
  border-radius: 5px;
}
.col8 ::v-deep .el-divider--horizontal {
  width: 96%;
  margin: 15px 7px;
}

.col8 ::v-deep .el-divider {
  background-color: #bbb;
}
</style>
